import React, { Component } from 'react'

// 受控：value 值收到了 state 中数据的控制，同时视图对 value 的修改会影响 state 中的数据（双向数据绑定）
export default class App extends Component {
  // !#1 准备控制 value 的变量
  state = {
    username: 'xxx',
  }
  handleInput = (e) => {
    // !#4 修改 this.state.username
    // console.log(e.target.value) // 输入的内容
    // this.state.username = e.target.value // 大错特错
    this.setState({
      username: e.target.value,
    })
  }
  render() {
    return (
      <ul>
        <li>
          <label htmlFor='username'>用户名</label>
          {/* //!#2 把 this.state.username 给表单的 value */}
          {/* //!#3 绑定 onChange 事件 */}
          <input
            id='username'
            type='text'
            value={this.state.username}
            onChange={this.handleInput}
          />
        </li>
      </ul>
    )
  }
}
